<template>
    <div>
        <input type="text" v-model="msg" @keyup.enter="handleEnter(msg)">
        <h1>未完成   {{list.length}}</h1>
        <div v-for="item of list" :key="item.msg">
            <input type="checkbox" :checked="item.doce" @click="handleBox(item.msg)">
            {{item.msg}}
            <button @click="handleDetail(item.msg)">删除</button>
        </div>
        <h1>已完成</h1>
        <div v-for="item of done" :key="item.msg">
            <input type="checkbox" :checked="item.doce" @click="handleClibox(item.msg)">
            {{item.msg}}
            <button @click="handleDet(item.msg)">删除</button>
        </div>
    </div>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity';
import {  watch } from '@vue/runtime-core';
export default {
    setup(){
        const state =reactive({
            msg:"",
            list:JSON.parse(localStorage.getItem('list'))|| [],
            done:JSON.parse(localStorage.getItem('done')) || [],
        handleEnter(msg){
        var list =this.list
        if(!list.includes(msg)){
          list.push({msg,doce:false})
          this.msg=""
        }else{
          alert("已经有这个值了")
          this.msg=""
        }
      },
      handleDetail(val){
          this.list =this.list.filter(item=>{
              return item.msg !=val
          })
      },
      handleBox(val){
          this.list =this.list.filter(item=>{
              if(item.msg ==val){
                 item.doce =!item.doce
                this.done.push(item)
              }
              return item.doce ==false
          })
      },
            handleDet(val){
                this.done =this.done.filter(item=>{
                    return item.msg !=val
                })
            },
            handleClibox(val){
                this.done =this.done.filter(item=>{
                    if(item.msg==val){
                        item.doce =!item.doce
                        this.list.push(item)
                    }
                    return item.doce ==true
                })
            }
        })
    watch(state,()=>{
        localStorage.setItem("list",JSON.stringify(state.list))
        localStorage.setItem("done",JSON.stringify(state.done))
    })
    const refState =toRefs(state)
    return{
      ...refState
       }
    }
};
</script>

<style  scoped>

</style>